<template>
  <v-app>
    <v-navigation-drawer
      app
      dark
      v-model="drawer"
      :mini-variant="mini"
      permanent
      color="primary"
    >
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-img
            src="https://img.icons8.com/offices/80/000000/user.png"
          ></v-img>
        </v-list-item-avatar>

        <v-list-item-title>未登录</v-list-item-title>
        <v-btn text :to="{ name: '登录' }">登录</v-btn>

        <v-btn icon @click.stop="mini = !mini">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          v-for="item in drawerItems"
          :key="item.title"
          link
          :to="item.to"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app color="transparent" flat>
      <v-app-bar-nav-icon @click.stop="mini = !mini"></v-app-bar-nav-icon>

      <v-toolbar-title
        class="hidden-sm-and-down font-weight-light"
        v-text="$route.name"
      />
      <v-spacer />
      <v-menu
        bottom
        left
        offset-y
        origin="top right"
        transition="scale-transition"
      >
        <template v-slot:activator="{ attrs, on }">
          <v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
            <v-badge color="red" overlap bordered>
              <template v-slot:badge>
                <span>5</span>
              </template>

              <v-icon>mdi-bell</v-icon>
            </v-badge>
          </v-btn>
        </template>

        <v-list :tile="false" nav>
          <v-list-item
            v-for="(n, i) in notifications"
            :key="`item-${i}`"
            link
            dense
          >
            <v-list-item-title v-text="n" />
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    drawer: true,
    mini: true,
    drawerItems: [
      {
        title: "主页",
        icon: "mdi-home-city",
        to: {
          name: "课程"
        }
      },
      {
        title: "个人中心",
        icon: "mdi-account"
      },
      {
        title: "好友",
        icon: "mdi-account-group-outline"
      },
      {
        title: "课程教学",
        icon: "mdi-book",
        to: {
          name: "教师课程主页"
        }
      },
      {
        title: "课程学习",
        icon: "mdi-book-open-variant",
        to: {
          name: "课程主页"
        }
      }
    ],
    notifications: [
      "Mike John Responded to your email",
      "You have 5 new tasks",
      "You're now friends with Andrew",
      "Another Notification",
      "Another one"
    ]
  })
};
</script>
